<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <script src="../js/vue.js"></script>
</head>

<body>
  <!-- 
	通过一个对象变量，将元素的style属性当做一个对象来绑定，便于修改单个css属性
	经过编译为字符串后，固定不变的style和动态的style的css属性最终合并为一个style属性 
	示例: 用上下左右四个按钮控制一个小方块的移动
-->
  <div id="app">
    <button @click="onUp">上</button>
    <button @click="onDown">下</button>
    <button @click="onLeft">左</button>
    <button @click="onRight">右</button>
    <div :style="[baseStyles,styleObject]"></div>
  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        baseStyles: {
          position: "fixed",
          width: "100px",
          height: "100px",
          "background-color": "pink",
        },
        styleObject: {
          top: "200px",
          left: "200px",
        },
      },
      methods: {
        onUp() { //上
          var top = parseInt(this.styleObject.top);
          top -= 20;
          this.styleObject.top = top + "px";
        },
        onDown() { //下
          var top = parseInt(this.styleObject.top);
          top += 20;
          this.styleObject.top = top + "px";
        },
        onLeft() { //左
          var left = parseInt(this.styleObject.left);
          left -= 20;
          this.styleObject.left = left + "px";
        },
        onRight() { //右	
          var left = parseInt(this.styleObject.left);
          left += 20;
          this.styleObject.left = left + "px";
        }
      },
    });
  </script>
</body>

</html>